<template>
  <div>
    <h1>From</h1>
    <c-from :model="model" :rules="rules" ref="loginForm">
      <from-item :label="'用户名'" prop="username">
        <from-input v-model="model.username" placeholder="请输入关键字" />
      </from-item>
      <from-item :label="'密码'" prop="password">
        <from-input
          v-model="model.password"
          placeholder="请输入密码"
          type="password"
        />
      </from-item>
      <from-item>
        <button @click="onLogin">登录</button>
      </from-item>
    </c-from>
    <p>{{ model.username }}</p>
  </div>
</template>

<script>
import FromInput from "../components/from/FromInput.vue";
import FromItem from "../components/from/FromItem.vue";
import CFrom from "../components/from/From.vue";
// import Notice from "../components/Notice.vue";
// import { create } from "../utils/create";
export default {
  components: {
    FromInput,
    FromItem,
    CFrom,
  },
  data() {
    return {
      model: {
        username: "username",
        password: "password",
      },
      rules: {
        username: [{ required: true, message: "用户名为必填项" }],
        password: [{ required: true, message: "密码为必填项" }],
      },
    };
  },
  methods: {
    onLogin() {
      this.$refs.loginForm.validate((isValid) => {
        // if(isValid) {
        //   console.log('submit login');
        // }else {
        //   alert("校验失败")
        // }
        // const notice = create(Notice, {
        //   title: "登录结果",
        //   message: isValid ? "登录成功" : "登录失败",
        //   duration: 1000,
        // });
        // notice.show()
        this.$notice({
          title: "登录结果",
          message: isValid ? "登录成功" : "登录失败",
          duration: 1000,
        })
      });
    },
  },
};
</script>

<style>
</style>